@import "global_variables";

.horticulture-container {

  .title {
    text-align: center;
    font-weight: 100;
  }

  .profile-card {
    height: 500px;
    margin-bottom: 20px;
  }

  .wrapper {
    display: block;
    margin-left: auto;
    margin-right: auto;
  }

  .image--cover {
    display: block;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    margin-left: auto;
    margin-right: auto;
  }

  .profile-details-card {
    height: 290px;
    margin-top: 10px;
  }

  .profile-row {
    text-align: center;
    margin-top: 10px;
  }

  .profile-row.wrapper {
    text-align: center;
  }

  .profile-card-row {
    padding-left: 20px;
  }

  .col-center-label {
    text-align: center;
  }

  .centered-header {
    text-align: center;
  }

  .device-name {
    justify-self: start;
  }

  .measurements-row {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 20px;
  }
  .padded-row {
    padding-left: 15px;
    padding-right: 15px;
  }
  .red-button.btn.btn-secondary {
    background-color: $orange-color;
    border-color: $orange-color;

  }
  .green-button.btn.btn-secondary {
    background-color: $purple-color;
    border-color: $purple-color;
    margin-right: 10px;
  }
  .leaf-wither {
    padding: 5px;
    border: 0px solid $purple-color;
  }

  .leaf-wither-with-border
  {
     border: 3px solid $purple-color;
  }
  .padded-col {
    margin-right: 10px;
    margin-top: 10px
  }

  .color-button {
    .btn-secondary {
      background-color: rgb(149, 38, 106);
      border-color: rgb(149, 38, 106);
      width: 100%;
    }
    .btn-secondary:hover {
      background-color: #358A49;
      border-color: #358A49;
    }
  }

  // colors
  $background-color: rgb(149, 38, 106);
  $brand-color: #358A49;



  .wheel {

    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

    border-radius: 50%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    ul li {
      position: absolute;
      top: 0;
      right: 0;
      list-style: none;
      border-bottom: 1px solid rgba(250, 250, 250, 0.1);
      transition: background-color 0.2s;
      width: 50%;
      height: 50%;
      transform-origin: 0% 100%;
      transition: background-color 0.2s;
      overflow: hidden;
      &:hover {
        cursor: pointer;
        background-color: $brand-color;
        color: #ffffff;
      }
      span {
        color: #ffffff;
        position: absolute;
        left: -100%;
        width: 200%;
        height: 200%;
        text-align: center;
        padding-top: 20px;
        text-transform: uppercase;
      }
    }
  }

}
